<template>
  <a-card>
    <a-spin :spinning="spinning">
      <h2>主动要盒配置</h2>
      <a-form-model ref="rulesForm" :model="form" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <a-form-model-item label="要盒页弹出广告" prop="name">
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :accept="'image/*'" @fileChange="fileChange" v-model="imgList"></JImageUpload>
          <p>像素1500X1800，格式jpg、png</p>
        </a-form-model-item>
        <a-form-model-item label="首次要盒奖励" prop="name">
          <a-switch v-model="form.status" checked-children="开" un-checked-children="关" />
        </a-form-model-item>
        <a-form-model-item label="优惠券" prop="name">
          <a-button type="primary" @click="openCoupons"><a-icon type="plus" />添加</a-button>
          <!-- <span class="tip" v-show="vouchersTip" style="margin-left:12px">请选择优惠券</span> -->
        </a-form-model-item>
        <div style="margin: 0 auto 24px; width: 1000px;">
          <CouponTable ref="vouchersTable" @updateCoupons="updateCoupons"></CouponTable>
        </div>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button @click="handleSubmit" type="primary">提交</a-button>
        </a-form-item>
      </a-form-model>
    </a-spin>
    <CouponModal ref="couponModal" @handleAddCoupons="handleAddCoupons"></CouponModal>
  </a-card>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import CouponTable from '@/views/box/components/couponModal/couponTable'
import { CouponModal } from '@/views/box/components'
import globalData from '@/assets/js/common'
import { couponList, attrCreateOrUpdateValue, attrValueList } from '@/api/box/setting'
export default {
  components: {
    JImageUpload,
    CouponTable,
    CouponModal
  },
  data() {
    return {
      form: {
        imgList: [],
        vouchersList: [],
        status: true
      },
      spinning: true,
      vouchersList: [],
      imgList: []
    }
  },
  mounted() {
    this.configureList()
  },
  methods: {
    // 优惠卷列表
    fetchCouponList(list) {
      let params = {
        page: {
          pageSize: 100,
          pageNo: 1
        },
        requestData: {
          ruleIds: list
        }
      }
      return couponList(params).then(res => {
        if (res.code == 0) {
          this.vouchersList = res.data
          this.$refs.vouchersTable.setData(this.vouchersList)
          this.spinning = false
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 回显
    configureList() {
      let params = {
        page: {
          pageSize: 10,
          pageNo: 1
        },
        requestData: {
          attrId: '12'
        }
      }
      attrValueList(params).then(res => {
        if (res.code == 0) {
          if (res.data && res.data.length > 0) {
            this.form = {
              id: res.data[0].id,
              attrId: res.data[0].attrId,
              code: res.data[0].code,
              description: res.data[0].description,
              vouchersList: res.data[0].name ? res.data[0].name.split(',') : [],
              status: res.data[0].isactive == 'N' ? false : true
            }
            this.imgList = res.data[0].img ? [res.data[0].img] : []
            this.fetchCouponList(this.form.vouchersList)
          }
        } else {
          this.$message.warning(res.msg)
          this.spinning = false
        }
      })
    },
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    /**
     * 选择优惠券
     */
    openCoupons() {
      this.$refs.couponModal.show()
    },
    handleAddCoupons(list) {
      let coupons = [...this.vouchersList, ...list]
      let newArr = coupons.filter((currentValue, currentIndex, sourceArr) => {
        return sourceArr.findIndex(x => x.id === currentValue.id) === currentIndex
      })
      this.vouchersList = newArr
      this.$refs.vouchersTable.setData(this.vouchersList)
    },
    updateCoupons(list) {
      this.vouchersList = list
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileChange(list) {
      this.form.imgList = list[0].url
    },
    // 确定
    handleSubmit(e) {
      e.preventDefault()
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          // console.log(this.form)
          let formValue = {
            img: this.form.imgList,
            isactive: this.form.status ? 'Y' : 'N',
            name: this.vouchersList.length > 0 ? this.vouchersList.map(e => e.id).join(',') : [],
            attrId: '12',
            id: this.form.id
          }
          let params = {
            requestData: formValue
          }
          attrCreateOrUpdateValue(params).then(res => {
            if (res.code == 0) {
              this.$message.success('保存成功')
              this.configureList()
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

